<template>
    <div>

        <el-row>
            <el-col :span="24">
                 <el-form :inline="true" :model="search">
                    <el-form-item label="关键字">
                      <el-input v-model="search.userName"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="openlog">添加</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                 <el-table :data="TableData" height="550" >

                    <el-table-column prop="id" label="Id"></el-table-column>
                    <el-table-column prop="userName" label="用户名"></el-table-column>
                    <el-table-column prop="realName" label="真实姓名"></el-table-column>
                    <el-table-column prop="sex" label="性别">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0">男</span>
                            <span v-if="scope.row.status == 1">女</span>
                        </template>

                    </el-table-column>
                    <el-table-column prop="phone" label="手机号"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间"></el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template slot-scope="scope">
                            <span v-if="scope.row.status == 0">启用</span>
                            <span v-if="scope.row.status == 1">禁用</span>
                        </template>

                    </el-table-column>

                    <el-table-column label="操作" width="200px">
                      <template slot-scope="scope">
                        <el-button type="text" v-if="scope.row.status == '1'" @click="upstatus(scope.row)" >启用</el-button> 
                        <el-button type="text" v-if="scope.row.status == '0'" @click="updatesuatus(scope.row)" >禁用</el-button> 
                        <el-button type="text" @click="delTbAdminById(scope.row)" >删除</el-button> 
                             <el-button type="text" @click="getAdmin(scope.row)">编辑</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                 <!-- 分页 -->
                 <div class="block">
                   <el-pagination
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageNum"
                     :page-sizes="[2, 4, 6, 8]"
                     :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total" style="float:right">
                   </el-pagination>
                 </div>
            </el-col>
        </el-row>


    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
            TableData:[],
            search:{
                userName:"",
            },
            total:null,
            pageNum:1,
            pageSize:2,
        }
    },
    created(){
        this.initTable()
    },
    methods:{
        initTable(){
            axios.post("/api/teacher/findTeacherList?pageNum="+this.pageNum+'&pageSize='+this.pageSize, this.search).then(res=>{
                this.TableData = res.data.data.items
                this.total = res.data.data.total
            })
        },
        //分页
        handleSizeChange(val) {
          this.pageSize = val;
          console.log(`每页 ${val} 条`);
          this.initTable();
        },
        handleCurrentChange(val) {
          this.pageNum = val;
          console.log(`当前页: ${val}`);
           this.initTable()
        },
        delTbAdminById(row){
            axios.delete("/api/teacher/delTeacherById?id="+row.id).then(res=>{
                alert(res.data.message)
                this.initTable()
            })
        },
        upstatus(row){
            axios.post("/api/teacher/updatestatus",row).then(res=>{
                alert(res.data.message)
                this.initTable()
            }    
            )
        },
        updatesuatus(row){
            axios.post("/api/teacher/upstatus",row).then(res=>{
                alert(res.data.message)
                this.initTable()
            }    
         )
        },
        onSubmit(){
            this.initTable()
        },
        openlog(){
             this.$router.push("/addTbadmin")
        },
        getAdmin(row){
            sessionStorage.setItem("id", row.id);
            this.$router.push("/addTbadmin")
        }
    }
    
}
</script>
<style scoped>

</style>